<template>
  <div class="imgItem" :style="{width:w,height:h}">
    <img src="../assets/roadimg/+.png" />
    <!--<img class="delect" src="./../../assets/leaveApplication/icon4.png" />-->
    <input type="file" @change="change($event)" accept="image/*">
  </div>
</template>



<script>
  export default {
    props: {
      w: {
        type: [String,Number],
      },
      h: {
        type: [String,Number],
      },
      index: {
        type: [String,Number],
      },
    },
    directives: {

    },
    components: {

    },
    data () {
      return {
        a:''
      }
    },
    methods: {
      change(event) {
        var _this = this;
        var imgobj = event.target.files[0];

        if (!imgobj) {
          return;
        }
        // if(imgobj.size>300*1024){
        //   this.$alertShow('上传图片必须300K以内')
        //   return
        // }
        this.$vux.loading.show({
          text: 'Loading'
        })
        var imgsize = (imgobj.size / 1024).toFixed(0);
        var imageUrl = this.getObjectURL(imgobj);
        this.convertImgToBase64(
          imageUrl,
          function(imgele) {
            _this.$emit("addImg", imgele,_this.index);
            _this.$vux.loading.hide()
            event.target.value=''
          },
          imgsize
        );
        event.preventDefault();
      },
      getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
          // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) {
          // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
          // web_kit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;
      },
      convertImgToBase64(url, callback, size) {
        var canvas = document.createElement("CANVAS");
        var ctx = canvas.getContext("2d");
        var img = new Image();
        size = parseInt(size);
        img.crossOrigin = "Anonymous";
        img.onload = function() {
          var width = img.width;
          var height = img.height;
          var rate = 1;
          if (width > 800 && size > 800) {
            rate = 800 / size;
          }
          canvas.width = width * rate;
          canvas.height = height * rate;
          ctx.drawImage(
            img,
            0,
            0,
            width,
            height,
            0,
            0,
            width * rate,
            height * rate
          );
          var dataURL = canvas.toDataURL("image/jpeg", 0.5);
          callback.call(this, dataURL);
          canvas = null;
        };
        img.src = url;
        this.$vux.loading.hide()
      },
    }
  }
</script>
<style scoped>

  .imgItem{float: left;position: relative;border:1px dashed #ccc;}
  .imgItem>*{width: 100%;height: 100%;position: absolute;top:0;left:0;display: block;}
  .imgItem>img{width:40%;height:40%;left:30%;top:30%;z-index: 1;}
  .imgItem> .delect{z-index: 5;width: 0.4rem;height: 0.4rem;right:0;left: auto;}
  .imgItem>input{z-index: 10;opacity: 0;}

</style>
